<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>让元素隐藏的多种方式</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: aqua;
            padding:20px;
            margin-bottom:20px;
            position: relative;
            /* border-bottom:1px solid red; */
        }

       /* 1px =>  after + transform:scale */
        .border_1px::after{
            content: '';
            position: absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            transform-origin: top left;
            border-bottom:1px solid red;
        }

       /* device-pixel-ratio:dpr  2.0  3.0    dpr = 设备物理像素 / 设备独立像素 */
        @media screen and (-webkit-min-device-pixel-ratio:2){
            .border_1px::after{
                width:200%;
                height:200%;
                transform: scale(.5);
            }
        }
        @media screen and (-webkit-min-device-pixel-ratio:3){
            .border_1px::after{
                width:300%;
                height:300%;
                transform: scale(.333);
            }
        }

        /* @media 
        1.pc  +   pad  +  手机  =>  html  +  css (条件 + 权重)
        2.手机  -  dpr =  物理像素 / 设备独立像素   
        @media screen  and  (条件){}
        1.屏幕宽度  +  高度 （栅格系统）  min/max-width/height
        2.dpr  2.0  3.0  
        3.横竖屏幕   
        4.rem适配  html{font-size:50px;}   脚本  +  vw单位  +  @media    750/375
        ...
        */

        .box1 {
            width: 400px;
            height: 400px;
            background-color: green;
        }

        /* 
        1.display:block  =>  display:none 
        2.opacity: 0;  => opacity: 1   [0,1]
        3.visibility: hidden; => visibility: visible;
        4.position: absolute; +  方位 top/bottom/left/right:-9999px;  =>
        5. transform：
         + translate(-9999px)
         + scale(0)
         + transform: rotate(90deg);  +  overflow:hidden
        ....


        1.img
        2.background
        3.sprites
        4.iconfont  @font-face
        5.svg
        ... 

        base64  ...   
        webpack => url-loader option 
         */
    </style>
</head>

<body>
    <!--  visibility: hidden;  和  display:none     
        + visibility: hidden  隐藏 - 占文档流 
        + display:none 隐藏 - 不占文档流 


        1.文字 - 隐藏     logo <h1>淘宝网</h1>
        +  font-size:0;
        +  text-indent:-9999
        2.容器 - 隐藏

     position :  absolute /  fixed
     display:  none / block 
     visiblity:visible 
     overflow：hidden

     -->

    <div class="box  border_1px">
        
    </div>
    <div class="box1"></div>


</body>

</html>